<template>
  <div class="guns-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="用户ID:">

              <a-input v-model:value.trim="where.custNo" placeholder="用户ID" allow-clear />
            </a-form-item>

            <a-form-item label="手机号:">
              <a-input v-model:value.trim="where.mobile" placeholder="手机号" allow-clear />
            </a-form-item>

            <a-form-item label="昵称:">
              <a-input v-model:value.trim="where.nickName" placeholder="昵称" allow-clear />
            </a-form-item>

            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable :canResize="false" ref="tableRef" :api="CustomerApi.findPage" :where="where" :columns="columns"
          showTableSetting rowKey="custNo" :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
          }">
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar"> </div>
          </template>

          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.dataIndex == 'custNo'">
              <a @click="openIntelligent(record)">{{ record.custNo }}</a>
            </template> -->

            <template v-if="column.dataIndex == 'status'">
              <a-tag v-if="record.status === 'Y'" color="#87d068">正常</a-tag>
              <a-tag v-else-if="record.status === 'N'" color="yellow">已注销</a-tag>
              <a-tag v-else color="red"> 封禁</a-tag>
            </template>
            <!-- table操作栏按钮 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="openDetail(record)">详情</a>
              </a-space>
            </template>

          </template>


        </BasicTable>
      </a-card>
    </div>

    <!-- 操作日志详情 -->
    <customer-detail v-model:visible="showDetail" :detail="current" @child-event="reset" />
    <!-- 操作智能体详情 -->
    <ai-agent-detail v-model:visible="showIntelligent" :detail="currentlist" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { CustomerApi } from '/@/api/touch/customer/CustomerApi';
import CustomerDetail from './customer-detail.vue';
import AiAgentDetail from '../aiAgentCheck/aiAgent-detail.vue';

// 查询条件
const where = reactive({
  custNo: '',
  mobile: '',
  nickName: ''
});


// 表格配置
const columns = ref<string[]>([
  {
    title: '创建用户ID',
    dataIndex: 'custNo',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '注册时间',
    dataIndex: 'regisTime',
  },
  {
    title: '注册IP',
    dataIndex: 'regisIp',
  },
  {
    title: '状态  ',
    dataIndex: 'status',
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
  }
]);


// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);
const currentlist = ref<any>(null);

// 是否显示详情弹框
const showDetail = ref<boolean>(false);
//是否显示体能题
const showIntelligent = ref<boolean>(false)


// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */
const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
  where.custNo = '';
  where.mobile = '';
  where.nickName = '';
  reload();
};

/**
 * 打开详情窗口
 *
 * @author fengshuonan
 * @date 2021/4/2 17:03
 */
const openDetail = async (row: any) => {
  current.value = await CustomerApi.detail({ custNo: row.custNo });
  showDetail.value = true;
};
// const openIntelligent = async (row: any) => {
//   currentlist.value = await CustomerApi.detail({ custNo: row.custNo });
//   showIntelligent.value = true;
// };
</script>
